<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="./js/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>{{time | formatDate('YYMMDD')}}</p>
    <p>{{price | formatPrice}}</p>
    <my-child></my-child>
  </div>
  <script>
    // Vue.mixin({
    //   beforeCreate() {
    //     console.log("全局混入");
    //   },
    // });

    console.dir(Vue);

    Vue.filter('formatDate', function (value, ...args) {
      // console.log(value, args);
      if (value) {
        const oDate = new Date(value);
        const y = oDate.getFullYear();
        if (isNaN(y)) {
          return ''
        }
        const m = oDate.getMonth() + 1;
        const d = oDate.getDate();
        return `${y}-${m}-${d}`
      }
      return ''
    })

    Vue.filter('formatPrice', function (value, ...args) {
      if (value) {
        return value / 100;
      }
      return ''
    })

    Vue.component('my-child', {
      data() {
        return {
          time: Date.now(),
        }
      },
      template: '<div><span>{{time | formatDate2}}</span></div>',
      filters: {
        formatDate2(value, ...args) {
          if (value) {
            const oDate = new Date(value);
            const y = oDate.getFullYear();
            if (isNaN(y)) {
              return ''
            }
            const m = oDate.getMonth() + 1;
            const d = oDate.getDate();
            return `${y}-${m}-${d}`
          }
          return ''
        }
      }
    })
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          time: Date.now(),
          price: 200
        };
      },
      created() {
        console.log("parent created");
      },
    });
  </script>
</body>

</html>